<template>
  <div class="login-wrapper">
    <div class="modal">
      <div class="title"><img src="/images/logo-img.png" class="logo" alt="" /></div>
      <div v-if="type == 'login'" class="modal-content">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          status-icon
          :rules="loginRules"
          label-width="0"
          class="login-form"
        >
          <el-form-item label="" prop="username">
            <el-input v-model="loginForm.username" autocomplete="off" size="large"
              ><template #prepend>用户名</template></el-input
            >
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              autocomplete="off"
              size="large"
              show-password
              ><template #prepend>密码</template></el-input
            >
          </el-form-item>
          <el-form-item label="" prop="code" class="code-box">
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="loginForm.code"
              class="code-input"
              style="width: 200px"
              size="large"
              @keyup.enter="submitLogin()"
              ><template #prepend>验证码</template></el-input
            >
            <div class="code" v-html="loginCode" @click="getLoginCodeFun"></div>
          </el-form-item>
          <el-form-item class="login-btn-box" label="" prop="">
            <el-button
              type="primary"
              class="submit-btn"
              size="large"
              color="#74aa9c"
              @click="submitLogin"
              >登录</el-button
            >
            <el-button size="large" class="index-btn" @click="goIndex">去首页</el-button>
          </el-form-item>
        </el-form>
        <div class="tip" @click="goRegister">还没有账号，现在去注册?</div>
        <div class="tip forgotPwd" @click="goForgotPwd">忘记密码?</div>
      </div>

      <div v-if="type == 'register'" class="modal-content">
        <el-form
          ref="registerFormRef"
          :model="registerForm"
          status-icon
          :rules="registerRules"
          label-width="70px"
          class="register-form"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="registerForm.username" autocomplete="off" size="large" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="registerForm.email" size="large" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="registerForm.password"
              type="password"
              autocomplete="off"
              size="large"
              show-password
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPwd">
            <el-input v-model="registerForm.confirmPwd" show-password size="large" />
          </el-form-item>
          <el-form-item label="验证码" prop="code" class="code-box">
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="registerForm.code"
              class="code-input"
              size="large"
            >
            </el-input>
            <div class="code" v-html="code" @click="getCodeFun"></div>
          </el-form-item>
          <el-form-item label="" prop="">
            <el-button
              type="primary"
              class="submit-btn"
              size="large"
              color="#74aa9c"
              @click="submitRegister"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
        <div class="tip" @click="goLogin">已有账号，去登录</div>
      </div>
    </div>
  </div>
  <forgotPwd
    ref="addEditFormRef"
    :show="dialogVisible"
    :data="forgotData"
    @hide-diao="hideForgot"
  />
</template>
<script setup lang="ts">
// import { Encrypt } from '@/utils/crypto'
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
// import { login, register } from '@api/user'
// import { useUserStore } from '@/pinia/user'
// import { getCode } from '@api/common'
// import { ElMessage } from 'element-plus'
// import { indexPhoneRoute } from '@/router'
// import forgotPwd from '@/components/common/forgotPwd.vue'
import { setRem } from '@/utils/rem'
import { useUserStore } from '@/stores/user'

setRem()

const userStore = useUserStore()
console.log(userStore)
const router = useRouter()

const loginFormRef = ref()
const registerFormRef = ref()
const type = ref('login')

const loginForm: any = ref({
  username: '',
  password: '',
})

const registerForm: any = ref({})

const loginRules = reactive({
  username: [{ required: true, message: '账号不能为空!', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空!', trigger: 'blur' }],
})

const confirmPwdValidate = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入确认密码'))
  } else if (value !== registerForm.value.password) {
    callback(new Error('两次密码不相同'))
  } else {
    callback()
  }
}

const confirmUserName = (rule: any, value: any, callback: any) => {
  const regExp = /(^[0-9a-zA-Z]+$)/
  if (!regExp.test(value)) {
    callback(new Error('用户名只能数字和字母!'))
  } else {
    callback()
  }
}

const confirmEmail = (rule: any, value: any, callback: any) => {
  const regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
  if (!regExp.test(value)) {
    callback(new Error('邮箱格式不正确!'))
  } else {
    callback()
  }
}

const registerRules = reactive({
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
    { min: 6, max: 12, message: '用户长度6-12位长度', trigger: 'blur' },
    { validator: confirmUserName, trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    { min: 6, max: 12, message: '密码长度6-12位长度', trigger: 'blur' },
  ],
  email: [
    {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur',
    },
    { validator: confirmEmail, trigger: 'blur' },
  ],
  confirmPwd: [{ validator: confirmPwdValidate, trigger: 'blur' }],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    },
  ],
})

// 获取验证码
const code = ref('')
const getCodeFun = async () => {
  // const res = await getCode({ key: 'register-code' })
  // code.value = res.data
}

// 获取验证码
const loginCode = ref('')
const getLoginCodeFun = async () => {
  // let res = await getCode({ key: 'login-code' })
  // loginCode.value = res.data
}

const goRegister = () => {
  type.value = 'register'
}

const goIndex = () => {
  router.push({ path: '/home' })
}

const goLogin = () => {
  type.value = 'login'
}

//登录
async function submitLogin() {
  loginFormRef.value.validate(async (valid: any) => {
    if (valid) {
      // let { username, password, code } = loginForm.value
      // let res = await login({ username, password: Encrypt(password), code, codeKey: 'login-code' })
      // if (res.code == 200) {
      //   userStore.login(res.data)
      //   router.push(indexPhoneRoute)
      // } else if (res.message == '验证码错误!') {
      //   loginForm.value.code = ''
      //   getLoginCodeFun()
      // }
    }
  })
}

//注册
async function submitRegister() {
  registerFormRef.value.validate(async (valid: any) => {
    console.log(valid)
    // let res = ''
    // if (valid) {
    //   const { username, password, email, code } = registerForm.value
    //   register({
    //     username,
    //     password: Encrypt(password),
    //     email,
    //     code,
    //     codeKey: 'register-code'
    //   }).then(
    //     (data) => {
    //       if (data.code == 200) {
    //         ElMessage.success(data.message)
    //         userStore.login(data.data)
    //         router.push(indexPhoneRoute)
    //       } else if (data.message == '验证码错误!') {
    //         registerForm.code = ''
    //         getCodeFun()
    //       }
    //     },
    //     () => {}
    //   )
    // }
  })
}

//添加编辑文章回调
const forgotData = ref({})
const dialogVisible = ref(false)
function hideForgot() {
  dialogVisible.value = false
}

const goForgotPwd = () => {
  forgotData.value = { email: '' }
  dialogVisible.value = true
}

onMounted(() => {
  // console.log(encode(md5("123456", '313131#%%520asdlfj')))
  getLoginCodeFun()
})

watch(type, (newD) => {
  if (newD == 'register') {
    getCodeFun()
  } else {
    getLoginCodeFun()
  }
})
</script>
<style lang="scss" scoped>
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9fcff;
  width: 100vw;
  height: 100vh;
  background: url('/images/login-bg.jpg') no-repeat;
  background-size: cover;
  background-position: center center;

  .modal {
    width: 90%;
    padding: 8rem 0;
    padding-top: 4rem;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0px 10px 3px #ddd;

    .modal-content {
      @include flex(row, center, center);
      flex-wrap: wrap;
      width: 100%;
      padding: 6rem 6rem;
      box-sizing: border-box;

      .tip {
        width: 100%;
        text-align: center;
        font-size: 3.2rem;
        color: var(--mainColor);
      }
      .tip:hover {
        color: var(--mainColor);
        text-decoration: underline;
        cursor: pointer;
      }

      .forgotPwd {
        margin-top: 4rem;
        color: #333;
      }

      .login-btn-box {
        :deep(.el-form-item__content) {
          display: flex;
          justify-content: space-between;
        }
      }

      .submit-btn {
        color: #fff !important;
        width: 48%;
        font-size: 3.2rem;
        --el-button-bg-color: #45babc !important;
        --el-button-hover-bg-color: rgb(64 176 178) !important;
        --el-button-active-bg-color: rgb(60 162 163) !important;
      }

      .index-btn {
        width: 48%;
        font-size: 3.2rem;
        margin-left: 0;
        // margin-top: 3rem;
      }
    }
    .title {
      font-size: 4.8rem;
      text-align: center;
      color: #020202;
      padding: 0px 0 3.6rem 0;
      border-bottom: 1px dashed #c0c0c0;

      .logo {
        width: 10rem;
        height: 10rem;
        // border-radius: 100px;
      }
    }

    .login-btn {
      width: 100%;
      margin-top: 3rem;
      background: linear-gradient(to right, #26d5b6, #1a89c0);
      border: none;
      height: 9rem;
    }
  }

  .input-icon {
    @include flex(row, center, center);
  }
}
</style>
<style lang="scss">
.register-form,
.login-form {
  width: 100%;
  .el-input-group__prepend {
    width: 9rem;
  }

  .el-form-item {
    margin-bottom: 5rem;
  }

  .code-box {
    width: 100%;
    height: 8rem;
    font-size: 2.4rem;
    @include flex(row, flex-start, center);
    margin-top: 3rem;
    .code-label {
      margin-right: 1rem;
      color: #444;
    }
    .code-input {
      flex: 1;
      border-radius: 0;

      .el-input__wrapper {
        border-radius: 0 !important;
      }
    }
    .code {
      width: 18rem;
      height: 8rem;
      cursor: pointer;

      svg {
        width: 18rem !important;
        height: 8rem !important;
      }
    }
  }
}
</style>
